<template>
 <div class="container">
    <a-icon type="left" v-if="isBack" @click="goBack"/>

    <div class="title">{{ title }}</div>
    <div class="" v-if="right" @click.stop="onRightClick">{{ right }}</div>
 </div>
</template>
<script>
export default {
    name: 'HeaderBar',
    props: {
        isBack: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: ''
        },
        right: {
            type: String,
            default: ''
        }

    },
    data() {
        return {}
    },
    methods: {
        onRightClick() {
            //console.log('right click')
            this.$emit('rightClick')
        },
        goBack(){
            this.$router.go(-1)
        }
    },
    mounted() {
        
    },
    components: {}
    
}

</script>
<style>
.container{
    width: 100%;
    display: flex;
    height: 40px;
    align-items: center;
    font-size: 16px;
    color: white;
    border-bottom: 1px solid #919090;
    padding:0 10px
}
.title{
    flex: 1;
    text-align: center;
    height: 40px;
    line-height: 40px;
}
.backIcon{
    margin-left: 20px;
    width: 20px;
    height: 40px;
    line-height: 40px;
}
</style>